<template>
  <div class="order-search-and-list-container">
    <!-- 搜索表单 -->
    <div class="search-form-wrapper">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <!-- 订单编号输入框 -->
        <el-form-item label="订单编号">
          <el-input v-model="form.id" placeholder="请输入编号" clearable class="input-style" />
        </el-form-item>
        <!-- 订单状态下拉选择框 -->
        <el-form-item label="订单状态">
          <el-select
            v-model="form.ordersStatus"
            placeholder="请选择订单状态"
            clearable
            style="width: 150px"
            class="select-style"
          >
            <el-option
              v-for="item in orderStatusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- 重置和查询按钮 -->
        <el-form-item>
          <el-button type="default" @click="resetForm" class="reset-button">重置</el-button>
          <el-button type="primary" @click="findList" class="search-button">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 订单列表展示 -->
    <div class="order-list-wrapper">
      <el-table :data="tableData" style="width: 100%" class="order-table">
        <!-- 订单编号列 -->
        <el-table-column align="center" prop="id" label="订单编号" width="170px" />
        <!-- 名称 -->
        <el-table-column align="center" prop="serveItemName" label="服务名称" />
        <!-- 类型 -->
        <el-table-column align="center" prop="serveTypeName" label="服务类型" width="250px" />
        <!-- 服务名称服务费用 -->
        <el-table-column align="center" prop="totalAmount" label="服务名称服务费用" width="250px" />
        <!-- 预约时间列 -->
        <el-table-column align="center" prop="dispatchTime" label="预约时间" width="250px" />
        <!-- 订单状态列 -->
        <el-table-column align="center" prop="ordersStatus" label="订单状态">
          <template #default="scope">
            <span v-if="scope.row.ordersStatus === null">-</span>
            <el-button
              v-else
              class="custom-order-status-button"
              type="primary"
            >
              <span v-if="scope.row.ordersStatus === 500">已完成</span>
              <span v-else-if="scope.row.ordersStatus === 600">已取消</span>
              <span v-else-if="scope.row.ordersStatus === 700">已关闭</span>
            </el-button>
          </template>
        </el-table-column>
        <!-- 操作列 -->
        <el-table-column align="center" prop="address" label="操作">
          <template #default="scope">
            <router-link :to="{path:'/orders/historyOrder/historyOrderDetail',query:{id:scope.row.id}}">查看</router-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-model:current-page="form.pageNum"
        v-model:page-size="form.pageSize"
        :page-sizes="[1, 20, 30, 40]"
        :size="paginationSize"
        :disabled="paginationDisabled"
        :background="paginationBackground"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handlePageSizeChange"
        @current-change="handlePageCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {findAll} from "@/api/orders/historyOrder";

// 订单列表数据
const tableData = ref([]);
// 搜索表单数据
const form = ref({
  pageNum: 1,
  pageSize: 2,
  id: null,
  ordersStatus: null,
});
// 总订单数
const total = ref(0);
// 分页相关配置
const paginationSize = ref('');
const paginationDisabled = ref(false);
const paginationBackground = ref(true);

// 查询订单列表数据
const findList = () => {
  findAll(form.value).then((res) => {
    tableData.value = res.data.data.records;
    console.log(res.data);
    total.value = res.data.data.total;
  });
};
// 初始化查询订单列表数据
findList();

// 处理分页每页数量变化
const handlePageSizeChange = (newPageSize) => {
  form.value.pageSize = newPageSize;
  findList();
};

// 处理分页当前页变化
const handlePageCurrentChange = (newPageNum) => {
  form.value.pageNum = newPageNum;
  findList();
};

// 订单状态选项配置
const orderStatusOptions = [
  { value: '500', label: '订单完成' },
  { value: '600', label: '已取消' },
  { value: '700', label: '已关闭' },
];

// 重置搜索表单
const resetForm = () => {
  form.value.pageNum = 1;
  form.value.pageSize = 10;
  form.value.id = '';
  form.value.ordersStatus = '';
  findList();
};
</script>

<style scoped>
/* 整体容器样式 */
.order-search-and-list-container {
  padding: 20px;
  background-color: #f9f9f9;
}

/* 搜索表单样式 */
.search-form-wrapper {
  margin-bottom: 20px;
  background-color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
}

/* 输入框样式 */
.input-style {
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 0 10px;
}

/* 下拉选择框样式 */
.select-style {
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* 重置按钮样式 */
.reset-button {
  margin-right: 10px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f5f5f5;
  color: #333;
  padding: 0 15px;
}

/* 查询按钮样式 */
.search-button {
  height: 32px;
  line-height: 32px;
  border: 1px solid #0a9fe5;
  border-radius: 4px;
  background-color: #0a9fe5;
  color: white;
  padding: 0 15px;
}

/* 订单表格样式 */
.order-table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  width: 100%;
  background-color: white;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

.order-table th,
.order-table td {
  border: 1px solid #ccc;
  padding: 8px 10px;
  text-align: center;
}

.order-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

/* 自定义订单状态按钮样式 */
.custom-order-status-button {
  padding: 5px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  color: #333;
  border-radius: 4px;
}

/* 分页样式 */
.pagination-style {
  margin-top: 10px;
  text-align: right;
}

.pagination-style.el-pagination {
  display: inline-block;
}
</style>
